<!-- 柱状图 -->
<template>
  <div>
    <!-- <div class="title">
      <p>{{ title }}</p>
    </div> -->
    <div ref="barchart" :style="{ height: height, width: width }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: "按日统计趋势",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    chartData: {
      type: Object,
      required: true,
    },
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.barchart, "macarons");
    this.setOptions(this.chartData);
  },
  methods: {
    setOptions(chartData) {
      this.myChart.setOption({
        xAxis: {
          data: chartData.xAxis,
          name: "任务名称",
          axisLine: { onZero: true },
          splitLine: { show: false },
          splitArea: { show: false },
        },
        yAxis: {},
        tooltip: {
          trigger: "item",
          formatter: function (param){
            return param.marker + param.name + ': ' + param.value //param.name + '<br/>' + 
          }
        },
        series: [
          {
						data: chartData.series,
						type: 'bar',
						barWidth : 50,
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#83bff6' },
								{ offset: 0.5, color: '#188df0' },
								{ offset: 1, color: '#188df0' }
							])
						}
					}
          // {
          //   name: "失败数量",
          //   type: "bar",
          //   stack: "one",
          //   color: '#F56C6C',
          //   emphasis: emphasisStyle,
          //   data: CountFail,
          //   barWidth: 50
          // },
          // {
          //   name: "关注数量",
          //   type: "bar",
          //   stack: "one",
          //   color: '#409EFF',
          //   emphasis: emphasisStyle,
          //   data: CountFocus,
          //   barWidth: 50
          // },
          // {
          //   name: "已阅数量",
          //   type: "bar",
          //   stack: "one",
          //   color: '#67C23A',
          //   emphasis: emphasisStyle,
          //   data: CountRead,
          //   barWidth: 50
          // },
          // {
          //   name: "送达数量",
          //   type: "bar",
          //   stack: "one",
          //   color: '#909399',
          //   emphasis: emphasisStyle,
          //   data: CountSend,
          //   barWidth: 50
          // },
          // {
          //   name: "全部数量",
          //   type: "bar",
          //   stack: "one",
          //   color: '#E6A23C',
          //   emphasis: emphasisStyle,
          //   data: CountTotal,
          //   barWidth: 50
          // },
        ],
      });
      this.myChart.off('click');
      this.myChart.on("click", (params) => {
        this.$emit("pieclick", params.name, this.title);
      });
    },
  },
};
</script>
<style scoped>
</style>